<template>
  <a-modal
    :title='title'
    :width='600'
    :visible='visible'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
  >
    <a-row :gutter='8'>
      <tree-select
        v-model='localTreeValue'
        style='width: 100%'
        :tree-data='treeData'
        tree-checkable
        allow-clear
        placeholder='Please select'
        tree-node-filter-prop='label'
        @select='onSelect'
      />
    </a-row>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import STree from '@/components/Tree/Tree'
import { TreeSelect } from 'ant-design-vue'
import { getTreeList, allocMenu } from '@/api/system'

const value = ['1']
// const SHOW_PARENT = TreeSelect.SHOW_ALL;
export default {
  name: 'RoleModal',
  components: {
    STree,
    TreeSelect
  },
  props: {
    title: {
      type: String,
      required: true

    },
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    treeValue: {
      type: Array
    }
  },
  watch: {
    // 监听 treeValue 的变化  
    treeValue(newValue) {
      console.log('treeValue changed:', newValue)
      this.localTreeValue = newValue
      // 在这里执行你希望在 treeValue 变化时执行的操作  
    }
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      mdl: {},

      form: this.$form.createForm(this),

      treeData: [],
      localTreeValue: this.treeValue,
      SHOW_PARENT: TreeSelect.SHOW_PARENT
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    getTreeList() {
      getTreeList().then(res => {
        this.treeData = []
        // console.log('res',res.data)
        // this.treeData.push(res.data[0])
        // console.log('treeData',this.treeData)
        // this.treeData=[]

        var children = []
        res.data.forEach((element) => {
          var kobj = {}
          children = []
          element.children.forEach((k) => {
            kobj = {
              label: k.title,
              value: k.id,
              children: k.children
            }
            // element.children=kobj
            children.push(kobj)
          })
          element.children = children
          var obj = {
            label: element.title,
            value: element.id,
            children: element.children
          }
          this.treeData.push(obj)
        })
        console.log('treeData', this.treeData)
      })
    },
    handleClick(e) {
      console.log('handleClick', e)
      this.queryParam = {
        key: e.key
      }
      this.$refs.table.refresh(true)
    },

    handleAdd(item) {
      console.log('add button, item', item)
      this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
      this.$refs.modal.add(item.key)
    },
    handleTitleClick(item) {
      console.log('handleTitleClick', item)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const _this = this

      console.log('parameter', _this.localTreeValue)
      // 把_this.localTreeValue的父节点ID也push进去
      var parameter = []
      _this.localTreeValue.forEach((element) => {
        if(parameter.indexOf(element)==-1){
          parameter.push(element)
        }
        _this.treeData.forEach((k) => {
          if (k.children) {
            k.children.forEach((j) => {
              if (j.value == element) {
                if(parameter.indexOf(k.value)==-1){
                  parameter.push(k.value)
                }
               // 跳出循环
                return false
              }
            })
          }
        })
      })
      console.log('parameter', parameter)
      // // 数组去重
      // parameter = Array.from(new Set(parameter))
      var params = {
        id: _this.model.id,
        menuIds: parameter
      }
      allocMenu(params).then(res => {
        console.log(res)
        this.visible = false
      })
    },
    handleCancel() {
      this.close()
    }

  }
}
</script>

<style scoped>

</style>
